﻿@{
    ViewBag.Title = "Trang chủ quản lí";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@using PagedList.Mvc;

@model PagedList.IPagedList<EC_ASS.Models.Product>
<div>
    @Html.ActionLink("Thêm sản phẩm", "AddItem", "Admin", null, new { id = "btnCreate", @class = "btn" })
    <div id='dialogDiv' class='modal hide fade in'>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Thông tin sản phẩm</h3>
        </div>
        <div id='dialogContent'></div>
        <div id="loadingImg" style="margin-top: 20px; margin-bottom: 20px;">
            <center>
                <img src="@Url.Content("~/img/ajax-loader.gif")" />
            </center>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#btnCreate').click(function () {
            $('#dialogContent').load(this.href, function () {
                $('#dialogDiv').modal({
                    backdrop: 'static',
                    keyboard: true
                }, 'show');
                $('#loadingImg').hide();
            });
            return false;
        });
    });
</script>
<br />
<!--Edit modal-->
<div>
    <div id='editModal' class='modal hide fade in'>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Thông tin sản phẩm</h3>
        </div>
        <div id='editModalContent'></div>
        <div id="editLoading" style="margin-top: 20px; margin-bottom: 20px;">
            <center>
                <img src="@Url.Content("~/img/ajax-loader.gif")" />
            </center>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.edit-product').click(function () {
            var itemID = $(this).attr('productID');
            var editUrl = this.href + '/' + itemID;
            $('#editModalContent').load(editUrl, function () {
                $('#editModal').modal({
                    backdrop: 'static',
                    keyboard: true
                }, 'show');
                $('#editLoading').hide();
            });
            return false;
        });
    });
</script>
<br />
<div id="itemTable">
    <table class="table table-bordered">
        <thead>
            <th>Tên</th>
            <th>Hình ảnh</th>
            <th>Số lượng</th>
            <th>Đả bán</th>
            <th>Size</th>
            <th>Giá</th>
            <th>Thao tác</th>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                if ((item.NumOfProduct - item.NumOfSold) == 0)
                {
                <tr class="error">
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        <img class="img-polaroid" src="@Url.Content("~/" + item.Picture)" height="100" width="100" title="@item.Name"/>
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.NumOfProduct)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.NumOfSold)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Size)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.ActionLink("Cập nhật", "EditItem", "Admin", null, new { @class = "btn edit-product", @productID = @item.ID })
                        @Html.ActionLink("Xóa", "DeleteItem", "Admin", null, new { id = "btnDelete", @class = "btn" })
                    </td>
                </tr>
            }
            else
            {
                <tr class="success">
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        <img class="img-polaroid" src="@Url.Content("~/" + item.Picture)" height="100" width="100" title="@item.Name"/>
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.NumOfProduct)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.NumOfSold)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Size)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.ActionLink("Cập nhật", "EditItem", "Admin", null, new { @class = "btn edit-product", @productID = item.ID })
                        @Html.ActionLink("Xóa", "DeleteItem", "Admin", null, new { @id = "btnDelete", @class = "btn" })
                    </td>
                </tr>
            }
        }
        </tbody>
    </table>
    <div class="row">
        <div class="pagedList pagination-centered">
            @Html.PagedListPager(Model, page => Url.Action("Index", "Admin", new { page }),
            PagedListRenderOptions.MinimalWithPageCountText)
        </div>
    </div>
</div>
